<template>
	<view>
		<u-cell-group>
			<u-cell-item title="头像">
				<image slot="right-icon" src="../../static/images/user-ava.png" mode="" class="user-avatar"
					@click="show = true"></image>
			</u-cell-item>
			<u-cell-item title="名字" value="雷布斯" @click="openUrl('/pages/ucenter/userName')"></u-cell-item>
		</u-cell-group>
		<view class="btn-group">
			<button type="default" class="btn confirm-btn">确定</button>
			<button type="default" class="btn cancel-btn">取消</button>
		</view>
		<u-action-sheet :list="list" v-model="show" border-radius="24"></u-action-sheet>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					text: '拍摄',
					color: '#248ee8',
					fontSize: 34,
				}, {
					text: '从相册选取',
					color: '#248ee8',
					fontSize: 34,
				}],
				show: false
			}
		},
		onLoad() {

		},
		methods: {
			openUrl(e) {
				console.log(e)
				uni.navigateTo({
					url: e
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.user-avatar {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
	}

	.u-cell {
		height: 130rpx;
		padding: 14rpx 30rpx;
	}

	.u-cell-box {
		.u-cell-item-box::after {
			display: none;
		}

		.u-cell:last-child::after {
			display: none;
		}
	}


	.btn-group {
		padding: 0 45rpx;
		margin-top: 150rpx;

		.btn {
			display: block;
			height: 80rpx;
			font-size: 36rpx;
			margin-bottom: 20rpx;
			line-height: 80rpx;
		}

		.confirm-btn {
			background-color: #248ee8;
			color: #fff;
			box-shadow: 4rpx 5rpx 10rpx rgba(0, 18, 152, 0.15);
		}

		.confirm-btn::after {
			border: 1px solid #248ee8;
		}

		.cancel-btn {
			color: #248ee8;
			background-color: #fff;
		}

		.cancel-btn::after {
			border: 1px solid #248ee8;
		}
	}
</style>
